<div
  class="
    flex items-center justify-between
    rounded px-3 py-2
    transform translate-y-full opacity-0 transition-all duration-500
    pointer-events-auto
    <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
  "
  data-controller="alert-animation"
  data-alert-animation-animation-class="translate-y-full opacity-0"
  data-alert-animation-transition-value="<%= Rails.env.test? ? 1000 : 500 %>"
  role="dialog"
  aria-label="<%= t(".#{@scheme}_label") %>"
  aria-live="polite"
>
  <%= icon_tag(@icon, class: 'w-[1.125rem] h-[1.125rem] mr-2 fill-current') if @icon %>

  <p class="font-semibold text-xs leading-none"><%= @text %></p>

  <button
    type="button"
    class="ml-2 align-text-bottom"
    title="<%= t('.close_text') %>"
    data-action="alert-animation#close"
    aria-label="<%= t('.close_text') %>"
    data-alert-animation-target="closeButton"
  >
    <%= icon_tag('close-line', class: "w-[1.125rem] h-[1.125rem] fill-current") %>
  </button>
</div>
